<template>
	<footer class="footer">
		<span class="todo-count">剩余<strong>数量值{{ leftCount }}</strong></span>
		<ul class="filters">
			<li>
				<a href="javascript:;" :class="{ selected: selectType === 'all'}" @click="changeType('all')">全部</a>
			</li>
			<li>
				<a href="javascript:;" :class="{ selected: selectType === 'active'}" @click="changeType('active')">未完成</a>
			</li>
			<li>
				<a href="javascript:;" :class="{ selected: selectType === 'complete'}" @click="changeType('complete')">已完成</a>
			</li>
		</ul>
		<button v-show="showClear" class="clear-completed" @click="eliminate">清除已完成</button>
	</footer>
</template>

<script>
	export default {
		data() {
			return {
				selectType: 'all'
			}
		},
		props: {
			arr: {
				type: Array,
				required: true
			}
		},
		computed: {
			//剩余数量值的计算
			leftCount() {
				return  this.arr.filter(item => item.isDone === false).length
			},
			//清除已完成的显示
			showClear() {
				return this.arr.some(item => item.isDone)
			}
		},
		methods: {
			//清除已完成功能
			eliminate() {
				this.$emit('eliminate')

			},
			changeType(type) {
				this.selectType = type
				this.$emit('changeType',type)
			}
		}
	}
</script>
